<template>
  <div class="benefitProup">
    <div class="proup" ref="proup">
      <img src="../assets/img/close.png" alt="" @click="close">
      <canvas ref="canvas"></canvas>
      <div class="line"></div>
      <img src="../assets/img/download.png" alt="" @click="download">
    </div>
  </div>
</template>

<script>
export default {
  props:['times'],
  data(){
    return{
      ctx:null,
      canvas:null,
      width:0,
      height:0
    }
  },
  created() {
  },
  mounted(){
    let height = this.$refs.proup.clientHeight,width = this.$refs.proup.clientWidth;
    let canvas = this.$refs.canvas;
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.width = width*4;
    this.height = height*4;
    canvas.height = height*4;
    canvas.width = width*4;

    this.drawImg()
  },
  methods:{
    drawImg(){
      //绘制背景颜色
      this.ctx.beginPath();
      this.ctx.fillStyle = "#283D4E";
      this.ctx.fillRect(0,0,this.width,this.height);
      this.ctx.closePath();

      //绘制图片
      let img = new Image();
      img.src = require("../assets/img/thumb.png");
      img.onload = ()=>{
        this.ctx.drawImage(img,this.width/2-292,120,584,480);
      }

      //绘制中间文字
      this.ctx.beginPath();
      // this.ctx.shadowOffsetX = 0;
      // this.ctx.shadowOffsetY = 20;
      // this.ctx.shadowColor = 'rgba(0,0,0,0.25)';
      // this.ctx.shadowBlur = 10;
      this.ctx.fillStyle = "#FFD136";
      this.ctx.moveTo(20,648);
      this.ctx.lineTo(this.width-20,648);
      this.ctx.arc(this.width-20,668,20,Math.PI*3/2, Math.PI*2);
      this.ctx.lineTo(this.width,779);
      this.ctx.lineTo(0,779);
      this.ctx.lineTo(0,668);
      this.ctx.arc(20,668,20,Math.PI,Math.PI*3/2);
      this.ctx.fill();
      this.ctx.closePath();

      this.ctx.beginPath();
      this.ctx.fillStyle = "#fff";
      this.ctx.font = "80px bold Verdana";
      this.ctx.textAlign = "center";
      this.ctx.fillText("“ I WIN ”",this.width/2,740)
      this.ctx.closePath();

      //绘制底层文字
      this.ctx.beginPath();
      this.ctx.fillStyle = "#E9884E";
      this.ctx.font = "120px bold Verdana";
      this.ctx.textAlign = "center";
      this.ctx.fillText(this.times+"x",this.width/2,930);
      this.ctx.closePath();

      this.ctx.beginPath();
      this.ctx.fillStyle = "#E9884E";
      this.ctx.font = "52px bold Verdana";
      this.ctx.textAlign = "center";
      this.ctx.fillText("I get "+ this.times +" times the",this.width/2,1050,700);
      this.ctx.fillText("reward in this round of games",this.width/2,1130,700);
      this.ctx.closePath();
    },
    download(){
        let DataUrl = this.canvas.toDataURL("image/png");
        let save_link = document.createElement("a");
        let urlObject = window.URL || window.webkitURL || window;
        let export_blob = new Blob([DataUrl]);
        // save_link.target = "_blank";
        save_link.href = urlObject.createObjectURL(export_blob);
        // save_link.href = DataUrl;
        save_link.download = new Date().getTime() + "iwin.png";

        try{
          save_link.click();
        }catch(e){
          console.log(e);
        }

        save_link.remove()
      
    },
    close(){
      this.$emit('closeBenefitProup');
    }
  }
}
</script>

<style lang="scss" scoped>
.benefitProup{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.6);
  .proup{
    background: #283D4E;
    height: 3.33rem;
    width: 2.28rem;
    border-radius: .067rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-35%);
    >canvas{
      transform: scale(.25) translate(-150%,-150%);
    }
    >img:nth-of-type(1){
      position: absolute;
      right: -.4rem;
      top: -.4rem;
      height: .25rem;
      width: .25rem;
    }
    >img:nth-last-of-type(1){
      height: .19rem;
      width: .21rem;
      position: absolute;
      bottom: .08rem;
      left: 50%;
      transform: translate(-50%,0);
    }
    .line{
      background: #466177;
      width: 100%;
      height: .0067rem;
      position: absolute;
      bottom: .36rem;
    }
  }
}
</style>